<template>
  <div>
    <div class="title">
      <img :src="currentCategory.banner_url" alt="" width="100%" />
      <h3>{{ currentCategory.name }}</h3>
      <p>{{ currentCategory.front_name }}</p>
    </div>
    <div>
      <van-grid :column-num="3" :icon-size="40">
        <van-grid-item
          :icon="item.wap_banner_url"
          :text="item.name"
          v-for="item in subCategoryList"
          :key="item.id"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  props: ["currentCategory", "subCategoryList"],
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  position: relative;
  img {
    width: 100%;
    height: 1rem;
    box-shadow: 0 0 6px #000;
    filter: brightness(0.5);
  }

  h3 {
    font-size: 0.15rem;
    padding: 0.2rem;
    background-color: #fff;
  }
  p {
    font-size: 0.16rem;
    position: absolute;
    top: 30%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
  }
}
</style>